<template>
  <div class="shoporder-content">
    <van-tabs
      @click="onClick"
      color="#fe9a0f"
      scroll="isFixed"
      :swipeable="true"
      class="ordertab"
      v-model="active"
    >
      <van-tab title="待处理"></van-tab>
      <van-tab title="进行中"></van-tab>
      <van-tab title="已完成"></van-tab>
    </van-tabs>
    <div class="main-content">
      <div v-for="(item,index) in items" :key="index" class="shoporderlist">
        <div class="shoplistbox">
          <div class="orderno">订单编号：{{ item.orderInfoId }}</div>
          <div class="orderbottombox">
            <div class="orderdesc">
              <p class="orderusername">{{ item.userName }}</p>
              <p class="orderaddress">联系方式：{{ item.phone }}</p>
              <p class="orderaddress">地址：{{ item.address }}</p>
              <p
                class="ordername"
                v-for="(item,index) in items[index].orders"
                :key="index"
              >{{ item.productName }}x{{ item.number }}</p>
              <p style="color:#f44" v-if="active == 0">下单时间：{{ item.addtime }}</p>

              <!-- <p style="color:red" v-if="active == 0">注：超过五分钟没有接单，默认为拒绝接单。</p> -->
              <yd-countdown slot="right" :time="item.time" :callback="Suk_timeout" v-if="active == 0">
                还剩<em>{%m2}</em>分<em>{%s1}</em><em>{%s2}</em>秒
              </yd-countdown>
            </div>
            <div class="orderbtngrounp" v-if="active == 0">
              <div class="yesbtn" @click="Suk_yesorder(index)">确认接单</div>
              <div class="nobtn" @click="Suk_noorder(index)">拒绝接单</div>
            </div>
            <div class="orderbtngrounp" v-if="active == 1">
              <div class="yesbtn">配送中</div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <img :src="items.length>0?null:noneimg" class="noneimg">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timer: null,
      active: 0,
      noneimg: require("@/assets/img/none.png"),
      // list:[],
      items: [],
      timeOut:null,
    };
  },
  beforeCreate: function() {
    //创建前
  },
  created: function() {
    this.menu();
    this.Suk_getlist();
    this.timer = setInterval(() => {
    this.Suk_getlist();
    }, 30000);
    //创建后
  },
  activated() {
    this.menu();
  },
  deactivated() {},
  beforeMount: function() {
    //挂载前
  },
  destroyed(){
    clearInterval(this.timer)
  },
  mounted: function() {
    //挂载后
  },
  beforeUpdate: function() {
    //更新前
  },
  update: function() {
    //更新后
  },
  methods: {
    // 这是我们的时间倒数结束的回调
    Suk_timeout() {
      let that = this;
      that.Suk_getlist(0);
    },
    // 确认接单
    Suk_yesorder(index) {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        orderInfoId: that.items[index].orderInfoId
      };
      // console.log(Sukdata);
      that.axios
        .post(
          that.baseUrl + "/dining/updateOrdersDining",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              // console.log(res.data);
              if (res.data.data == "订单已超时") {
                that.$toast.fail({
                  message: "订单已超时！"
                });
                that.timeOut=setTimeout(() => {
                that.Suk_getlist();
                }, 2000);
              } else {
                that.Suk_getlist();
              }
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    //拒绝接单
    Suk_noorder(index) {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        orderInfoId: that.items[index].orderInfoId
      };
      // console.log(Sukdata);
      that.axios
        .post(
          that.baseUrl + "/dining/updateJuJueOrderInfo",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data);
              if ((res.data.data = "订单已超时")) {
                that.$toast.fail({
                  message: "订单已超时！"
                });
                that.Suk_getlist();
              }
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    Suk_getlist() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        dinId: localStorage.getItem("myshopid"),
        dinStatus: that.active
      };
      console.log(Sukdata);
      that.axios
        .post(
          that.baseUrl + "/order/queryDinOrder",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function(res) {
          if (res.request.status === 200) {
            // console.log(res.data.data,'123')
            if (res.data.meta.code == 200) {
              if (res.data.data == "暂无订单") {
                that.$toast.fail({
                  message: "暂无订单！"
                });
                that.items = "";
              } else if (res.data.data == "商家不存在") {
                that.$toast({
                  message: "商家不存在"
                });
              } else {
                that.items = res.data.data;
                // console.log(res.data);
                that.$toast.clear();
              }
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    mounted() {},
    distroyed: function() {},
    onClick(e) {
      let that = this;
      that.active = e;
      console.log(that.active, "index");
      that.Suk_getlist(that.active);
    },
    menu(e) {
      window.scrollTo(0, 0);
    }
  }
};
</script>
<style lang="scss" scoped>
.ordertab {
  color: #fe9a0f;
}
.shoporder-content {
  font-size: 0.3rem;
  background: #f4f4f4;
  padding-bottom: 12rem;
}
.shoporderlist {
  width: 90%;
  border-radius: 0.11rem;
  border-left: 0.1rem solid #31a8ac;
  margin: 0 auto;
  background: #fff;
  margin-top: 0.3rem;
  .shoplistbox {
    width: 90%;
    margin: 0 auto;
    .orderdesc {
      display: inline-block;
      width: 70%;
      .orderusername {
        font-size: 0.6rem;
      }
    }
    .orderno {
      border-bottom: 1px dotted #919191;
      height: 1rem;
      line-height: 1rem;
      color: #000;
    }
  }
}

.orderbottombox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.3rem;
}

.orderbtngrounp {
  display: inline-block;
  text-align: center;
  .yesbtn {
    width: 2.267rem;
    height: 0.9rem;
    background: #fe9a0f;
    text-align: center;
    line-height: 0.9rem;
    color: #fff;
    border-radius: 0.1rem;
  }
  .nobtn {
    width: 2.267rem;
    height: 0.9rem;
    background: #8a8a8a;
    text-align: center;
    line-height: 0.9rem;
    color: #fff;
    border-radius: 0.1rem;
    margin-top: 0.55rem;
  }
}

.orderaddress {
  overflow: hidden;
  text-overflow: ellipsis;
}
.noneimg {
  width: 100%;
}
</style>
